<template>
    <div class="sidebar"
         :class="sidebarCollapse === 'yes' || 'sidebar-collapse'"
         :style="{backgroundColor: backgroundColor}">
        <div class="logo" :class="{'logo-simple': sidebarCollapse === 'yes'}">
            <icon name="yqrc-simple"></icon>
            <span v-if="sidebarCollapse === 'no'" class="site-name">管理系统</span>
        </div>
        <div class="sidebar-menu">
            <el-scrollbar class="sidebar-menu--scrollbar"
                          :native="false">
                <el-menu :collapse="sidebarCollapse === 'yes'"
                         :background-color="backgroundColor"
                         :text-color="textColor"
                         :active-text-color="activeTextColor"
                         :collapse-transition="false"
                         :router="true">
                    <template v-for="(one, i) in sidebarMenus">
                        <!-- 子菜单 -->
                        <template v-if="one.child">
                            <div v-if="one.title"
                                 :key="`${one.icon}-${i}`"
                                 class="el-menu-item-group__title">{{ one.title }}</div>
                            <el-submenu :index="`${i}`" :key="one.icon">
                                <template slot="title">
                                    <icon :name="one.icon"></icon>
                                    <span slot="title">{{ one.name }}</span>
                                </template>
                                <!-- 二级 -->
                                <template v-for="(two, j) in one.child">
                                    <!-- 三级 -->
                                    <template v-if="two.child">
                                        <el-submenu :index="`${i}-${j}`"
                                                    :key="two.icon">
                                            <template slot="title">
                                                <icon :name="two.icon"></icon>
                                                <span slot="title">{{ two.name }}</span>
                                            </template>
                                            <template v-for="(three, t) in two.child">
                                                <el-menu-item :index="`${i}-${j}-${t}`"
                                                              :key="`${three.icon}-${i}-${j}-${t}`"
                                                              :route="{path: three.link}">
                                                    <icon :name="three.icon"></icon>
                                                    <span slot="title">{{ three.name }}</span>
                                                </el-menu-item>
                                            </template>
                                        </el-submenu>
                                    </template>
                                    <!-- 二级没子菜单 -->
                                    <template v-else>
                                        <el-menu-item :index="`${i}-${j}`"
                                                      :key="`${two.icon}-${i}-${j}`"
                                                      :route="{path: two.link}">
                                            <icon :name="two.icon"></icon>
                                            <span slot="title">{{ two.name }}</span>
                                        </el-menu-item>
                                    </template>
                                </template>
                            </el-submenu>
                        </template>
                        <!-- 非子菜单 -->
                        <template v-else>
                            <el-menu-item :index="`${i}`"
                                          :key="`${one.icon}-${i}`"
                                          :route="{path: one.link}">
                                <icon :name="one.icon"></icon>
                                <span slot="title">{{ one.name }}</span>
                            </el-menu-item>
                        </template>
                    </template>
<!--                    <template v-for="(item, i) in sidebarMenus">-->
<!--                        <template v-if="!item.child">-->
<!--                            <el-menu-item :key="item.icon"-->
<!--                                          :index="`${i}`"-->
<!--                                          :route="{path: item.link}">-->
<!--                                <icon :name="item.icon"></icon>-->
<!--                                <span slot="title">{{ item.name }}</span>-->
<!--                            </el-menu-item>-->
<!--                        </template>-->

<!--                        &lt;!&ndash; 子菜单 &ndash;&gt;-->
<!--                        <template v-else>-->
<!--                            &lt;!&ndash; 分组标题 &ndash;&gt;-->
<!--                            <div v-if="item.title"-->
<!--                                 :key="item.icon"-->
<!--                                 class="el-menu-item-group__title">{{ item.title }}</div>-->
<!--                            <el-submenu v-for="(children, j) in item.child"-->
<!--                                        :index="`${i}`"-->
<!--                                        :key="children.icon + i + j">-->
<!--                                &lt;!&ndash; &ndash;&gt;-->
<!--                                <template slot="title">-->
<!--                                    <icon :name="item.icon"></icon>-->
<!--                                    <span>{{ item.name }}</span>-->
<!--                                </template>-->
<!--                                &lt;!&ndash; &ndash;&gt;-->
<!--                                <template v-if="children.child">-->
<!--                                    <el-menu-item-group>-->
<!--                                        <span slot="title">分组一</span>-->
<!--                                        <el-menu-item index="1-1">选项1</el-menu-item>-->
<!--                                        <el-menu-item index="1-2">选项2</el-menu-item>-->
<!--                                    </el-menu-item-group>-->
<!--                                </template>-->
<!--                            </el-submenu>-->

<!--&lt;!&ndash;                            <admin-sidebar-sub-menu :key="item.title"&ndash;&gt;-->
<!--&lt;!&ndash;                                                    :menu="item"&ndash;&gt;-->
<!--&lt;!&ndash;                                                    :index="index + 1"&ndash;&gt;-->
<!--&lt;!&ndash;                                                    :append="`${index}-`"></admin-sidebar-sub-menu>&ndash;&gt;-->
<!--                        </template>-->
<!--                    </template>-->
                </el-menu>
            </el-scrollbar>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

import AdminSidebarSubMenu from '@/components/cms/AdminSidebarSubMenu.vue'

// 菜单接口
interface Menu<T = any> {
  title?: string;
  name: string;
  icon: string;
  link?: string;
  subMenu?: boolean | string | undefined;
  child?: Array<any>;
}

@Component({
  components: {
    AdminSidebarSubMenu
  }
})
export default class AdminSidebar extends Vue {
  @Prop({type: String, default: '#fff'}) textColor!: string
  @Prop({type: String, default: '#ffd04b'}) activeTextColor!: string
  @Prop({type: String, default: '#3b4148'}) backgroundColor!: string
  @Prop({type: String, default: 'no'}) sidebarCollapse!: string

  sidebarMenus: Array<any> = [
    {
      name: '我的工作台',
      icon: 'workbench',
      link: '/cms'
    },
    {
      title: '用户',
      name: '个人管理',
      icon: 'personal',
      child: [
        {
          name: '注册用户',
          icon: 'user',
          link: '/cms/personal/user'
        },
        {
          name: '简历库',
          icon: 'resume',
          link: '/cms/personal/resume'
        },
        {
          name: '未审核简历',
          icon: 'audit',
          link: '/cms/personal/resume-audit'
        },
        {
          name: '头像审核',
          icon: 'pic',
          link: '/cms/news/pic'
        }
      ]
    },
    {
      name: '企业管理',
      icon: 'company',
      child: [
        {
          name: '注册用户',
          icon: 'user',
          link: '/cms/company/user'
        },
        {
          name: '基本信息',
          icon: 'company',
          link: '/cms/company/basic'
        },
        {
          name: '招聘岗位',
          icon: 'position',
          link: '/cms/company/job'
        },
        {
          name: '待审岗位',
          icon: 'position',
          link: '/cms/company/audit'
        },
        {
          name: '刷新日志',
          icon: 'list',
          link: '/cms/company/refresh-log'
        },
        {
          name: 'Logo审核',
          icon: 'pic',
          link: '/cms/company/logo-audit'
        },
        {
          name: '认证审核',
          icon: 'business-license',
          link: '/cms/company/logo-audit'
        }
      ]
    },
    {
      title: '增值',
      name: '增值管理',
      icon: 'value-add-services',
      child: [
        {
          name: '工作台',
          icon: 'workbench',
          link: '/cms/product/index'
        },
        {
          name: '产品发布',
          icon: 'publish',
          link: '/cms/product/publish'
        },
        {
          name: '产品管理',
          icon: 'data-list',
          link: '/cms/product/manage'
        },
        {
          name: '分类',
          icon: 'all',
          link: '/cms/product/manage'
        },
        {
          name: '图片',
          icon: 'pic',
          link: '/cms/product/pic'
        },
        {
          name: '订单',
          icon: 'orders',
          link: '/cms/product/order'
        },
        {
          name: '询价',
          icon: 'inquiry',
          link: '/cms/product/order'
        }
      ]
    },
    {
      title: '小程序',
      name: '小程序管理',
      icon: 'mini-program',
      child: [
        {
          name: '小程序配置',
          icon: 'config',
          link: '/cms/mini-program/config'
        },
        {
          name: '客户访问足迹',
          icon: 'footprint',
          link: '/cms/mini-program/footprint'
        },
        {
          name: '实时监控',
          icon: 'monitor',
          link: '/cms/mini-program/monitor'
        },
        {
          name: '小程序分享记录',
          icon: 'share',
          link: '/cms/mini-program/manage'
        },
        {
          name: '小程序反馈',
          icon: 'feedback',
          link: '/cms/mini-program/feedback'
        }
      ]
    },
    {
      title: 'App',
      name: 'App管理',
      icon: 'app',
      child: [
        {
          name: 'App配置',
          icon: 'config',
          link: '/cms/app/config'
        },
        {
          name: 'App反馈',
          icon: 'feedback',
          link: '/cms/app/feedback'
        }
      ]
    },
    {
      title: '营销',
      name: '广告管理',
      icon: 'ads',
      child: [
        {
          name: '广告管理',
          icon: 'ads',
          link: '/cms/user/index'
        },
        {
          name: '广告位置管理',
          icon: 'data-manage',
          link: '/cms/app/create'
        }
      ]
    },
    {
      title: 'CRM',
      name: 'CRM客户管理',
      icon: 'crm',
      child: [
        {
          name: '权限管理',
          icon: 'permission',
          link: '/cms/crm/permission'
        },
        {
          name: '角色管理',
          icon: 'role',
          link: '/cms/crm/role'
        },
        {
          name: '用户管理',
          icon: 'user',
          link: '/cms/crm/user'
        },
        {
          name: 'CRM日志',
          icon: 'log',
          link: '/cms/crm/log'
        }
      ]
    },
    {
      title: '系统',
      name: '系统设置中心',
      icon: 'setting',
      child: [
        {
          name: '配置',
          icon: 'config',
          link: '/cms/config'
        },
        {
          name: '菜单设置',
          icon: 'menu',
          child: [
            {
              name: '菜单管理',
              icon: 'list',
              link: '/cms/menu/index'
            },
            {
              name: '创建菜单',
              icon: 'menu',
              link: '/cms/menu/create'
            }
          ]
        }
      ]
    },
    {
      name: '管理员管理',
      icon: 'admin',
      child: [
        {
          name: '管理员管理',
          icon: 'admin',
          link: '/cms/admin/admin-user'
        },
        {
          name: '角色管理',
          icon: 'role',
          link: '/cms/admin/role'
        },
        {
          name: '权限管理',
          icon: 'permission',
          link: '/cms/admin/permission'
        },
        {
          name: '操作日志',
          icon: 'log',
          link: '/cms/admin/log'
        }
      ]
    },
    {
      name: '网站管理',
      icon: 'website-manage',
      child: [
        {
          name: '菜单导航',
          icon: 'menu',
          link: '/cms/website/menu'
        },
        {
          name: '网站内容管理',
          icon: 'description',
          link: '/cms/website/content'
        },
        {
          name: '友情链接',
          icon: 'links',
          link: '/cms/website/links'
        },
        {
          name: '问题反馈',
          icon: 'feedback',
          link: '/cms/website/feedback'
        }
      ]
    },
    {
      name: '系统选项设置',
      icon: 'option',
      child: [
        {
          name: '选项分类',
          icon: 'option',
          link: '/cms/option/category'
        },
        {
          name: '选项管理',
          icon: 'list',
          link: '/cms/option/list'
        },
        {
          name: '地区选项',
          icon: 'area',
          child: [
            {
              name: '地区管理',
              icon: 'area',
              link: '/cms/option/area'
            },
            {
              name: '城镇管理',
              icon: 'town',
              link: '/cms/option/area/town'
            }
          ]
        }
      ]
    },
    {
      name: '重建缓存',
      icon: 'clear',
      link: '/cms/clear'
    }
  ]

}
</script>

<style lang="scss">
.sidebar {
    position: relative;
    //overflow: hidden;
    //width: 220px;
    height: 100%;
    //background-color: transparent;
    //background-image: url("../../../assets/images/sidebar-bg.jpg");
    //background-size: cover;

    // 菜单切换
    &-collapse {
        //width: 60px;
    }

    // logo
    .logo {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 220px;
        height: 60px;
        color: rgba(#fff, .8);
        text-align: center;
        /*background-color: rgba(#fff, .5);*/
        //border-bottom: rgba(#000, .1) 1px solid;
        transition: color .3s;

        .r-icon-yqrc-simple {
            font-size: 32px;
        }

        &-simple {
            width: 60px;

            .r-icon-yqrc-simple {
                font-size: 28px;
            }
        }

        &:hover {
            color: rgba(#fff, .7);
        }

        .site-name {
            position: relative;
            padding-left: 20px;
            font-size: 20px;
            line-height: 1;
            /*font-weight: bold;*/
            &::after {
                content: " ";
                position: absolute;
                left: 10px;
                top: 50%;
                width: 4px;
                height: 4px;
                border-radius: 4px;
                transform: translate(0, -50%);
                background-color: rgba(#fff, .2);
            }
        }


        /*&-image {*/
        /*    width: 100%;*/
        /*    height: 45px;*/
        /*    background-image: url("../../../assets/images/logo.svg");*/
        /*    background-repeat: no-repeat;*/
        /*    background-position: center center;*/
        /*}*/
    }

    &-menu {
        position: relative;
        height: calc(100% - 60px);
        //height: 100%;

        &--scrollbar {
            height: 100%;

            .el-scrollbar__wrap {
                overflow-x: hidden !important;
            }
        }

        // 菜单
        .el-menu {
            /*background-color: inherit;*/
            border-width: 0;

            // 正常菜单
            &:not(.el-menu--collapse) {
                width: 220px;
            }

            // 菜单 & 子菜单标题 高度
            .el-submenu__title,
            .el-menu-item {
                //color: rgba(#fff, .5);
                height: 40px !important;;
                font-weight: 500 !important;;
                line-height: 40px !important;;
                /*border-bottom: rgba(#000, .07) 1px solid;*/

                .r-icon {
                    font-size: 15px;
                    margin-right: 5px;
                }
            }

            // 激活菜单
            .el-menu-item.is-active {
                background-color: rgba(#fff, .1) !important;
            }
        }

        // 菜单打开
        .is-opened {
            .el-menu-item,
            .el-submenu__title {
                background-color: rgba(#fff, .2) !important;

                &:hover {
                    background-color: rgba(#fff, .1) !important;
                }
            }

            // 激活菜单
            .is-active {
                background-color: rgba(#fff, .1) !important;
            }
        }
    }
}

// 菜单弹出
.el {
    &-menu {
        &--vertical {
            .el-menu-item,
            .el-submenu__title {
                height: 40px !important;
                line-height: 40px !important;;

                .r-icon {
                    font-size: 15px;
                    margin-right: 5px;
                }
            }
        }
    }
    //&-submenu {
    //    ::v-deep .el-menu-item {
    //        height: 40px;
    //        line-height: 40px;
    //    }
    //}
}
</style>
